<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>轮播速度ces</title>
		<!-- <script crossorigin="anonymous" integrity="sha512-OWExZelMB7FGQenY+4T6kFCM9zATiidWZ2ugUhlYHaqW4XtxZNwbhlIf8/8YaWtW3lSr+AQOcBfsqEIZjHkfJw==" src="https://lib.baomitu.com/Swiper/6.0.3/swiper-bundle.min.js"></script> -->
		<script crossorigin="anonymous"
			integrity="sha384-MMe2o+KJ3FtEhiE3BuBKIBP2BIjMxNALdkdPrQ0tl4H0IKO4x3PymWlt+hXuj2A8"
			src="https://lib.baomitu.com/Swiper/3.4.2/js/swiper.jquery.js"></script>
		<script crossorigin="anonymous"
			integrity="sha384-WqEScjxyw0yOP2ju1kbQJ8APJNbmaWpdAZSwRi/nraoM49F+HxMDJsde89iJf7aZ"
			src="https://lib.baomitu.com/Swiper/3.4.2/js/swiper.min.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link crossorigin="anonymous"
			integrity="sha384-vo50hXtn++/P8/rFjBxcsOVc14cJi9ibeQ96ujWvPfEmiojAoHF+bt7cOFv4wkHe"
			href="https://lib.baomitu.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
		<style type="text/css">
			.swiper-container {
				width: 600px;
				height: 300px;
			}

			.bu {
				background-color: #008000;
			}

			.re {
				background-color: red;
			}

			.gm {
				background-color: #007DDB;
			}

			.nr {
				text-align: center;
				line-height: 300px;
				color: white;
				font-size: 32px;
				font-weight: 680;
				/* font-family: "微软雅黑"; */
			}
		</style>
	</head>
	<body>
		<!-- swiper 轮播图插件使用实例 -->
		<div id="wp">
			{{wp}}

			<!-- Swiper BEGIN -->
			<!-- <div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide bu nr">萍</div>
					<div class="swiper-slide re nr">红</div>
					<div class="swiper-slide gm nr">慧</div>
				</div>
			</div> -->

			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide bu nr" v-for="item in wpList">{{item}}</div>
				</div>
			</div>
		</div>

		<!-- Swiper END -->

		<!-- <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script> -->
		<script type="text/javascript">
			var app = new Vue({
				el: "#wp",
				data: {
					wp: 12,
					wpList: ['安', '念', '萍', '慧', '琴']
				}
			})

			console.log('vue');
			console.log(app);
			console.log(app.$data.wpList.length);

			var mySwiper = new Swiper('.swiper-container', {
				// direction: 'vertical',//垂直
				direction: 'horizontal', //水平默认
				// autoplay: true, //自动滑动
				autoplay: 2000, //自动滑动时长
				speed: 1000, //切换时长
				grabCursor: true, //手掌形状
				loop: true, //是否循环
				effect: 'cube', //切换效果，默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）
			})

			console.log(mySwiper);
			console.log('wp');
			console.log(mySwiper.slides.length);
			// if (mySwiper.slides.length == 5) {
			// 	mySwiper.lockSwipes();
			// }
		</script>
	</body>
</html>
